<template>
  <div>
    <div class="gen-model-field" @click="showDlg" :title="value">
      <span v-if="value">{{value}}</span>
      <span v-else style="color: #787878;">请选择</span>
    </div>
    <Modal v-model="show">
      <div slot="header">数据列表来源</div>
      <Tabs :datas="items" v-model="selected"></Tabs>
      <div style="height: 5px"></div>
      <div v-if="selected=='dict'">
        <Select v-model="subValue" dict="dicts" filterable></Select>
      </div>
      <div v-if="selected=='translate'">
        <Select v-model="subValue" dict="translates" filterable></Select>
      </div>
      <div slot="footer">
        <Button class="h-btn" @click="show=false">取消</Button>
        <Button class="h-btn" @click="selectNone">无数据选项</Button>
        <Button class="h-btn h-btn-primary" @click="submit">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {DataSource} from 'framework'

export default {
  name:'Options',
  props: {value:String},
  data(){
    return {
      show:false,
      selected:'dict',
      items:{
        dict:'来自字典',
        translate:'来自Translate',
      },
      subValue:''
    }
  },
  methods:{
    showDlg(){
      if(!this.value){
        this.selected='dict'
      }else{
        let i=this.value.indexOf(":");
        let vs=this.value;
        this.selected=vs.substr(0,i)
        this.subValue=vs.substr(i+1)
      }
      this.show=true
    },
    submit(){
      if(!this.subValue){
        this.selectNone()
      }else{
        this.$emit("input",this.selected+":"+this.subValue)
        this.show=false
      }
    },
    selectNone(){
      this.$emit("input",'')
      this.show=false
    }
  }
}
</script>
